<template>
	<view class="mine_box box">
		<view class="mine_container">
			<view class="" style="height: 226rpx;">

			</view>
			<view class="mine_userInfo" v-if="isLogin">
				<view class="mine_userInfo_left">
					<img :src="userInfo.avatarUrl" alt="" />
				</view>
				<view class="mine_userInfo_right">
					<view class="mine_userInfo_right_top">
						{{userInfo.nickName}}
					</view>
					<view class="mine_userInfo_right_bottom">
						{{userInfo.phone}}
					</view>
				</view>
				<view class="" @click="gotoUserInfoPage" style="width:100rpx;text-align:center;line-height:100rpx;">
					<image src="../../static/setting@2x.png" mode="" style="width: 46rpx;height: 46rpx;"></image>
				</view>
			</view>
			<view class="mine_userInfo" @click="gotoUserInfo" v-else>
				<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">登录</button>
			</view>
		</view>
		<view class="mine_pay">
			<view class="mine_pay_box">
				<view class="mine_pay_apply">
					<view class="mine_pay_apply_left" v-if="showApplyingTeamLeader" @click="applyingTeamLeaderMethod">
						<image src="../../static/mine/user.png" mode="" class="user"></image>
						<text>申请成为团长</text>
					</view>
					<view class="mine_pay_apply_left" v-else>
						<image src="../../static/mine/user.png" mode="" class="user"></image>
						<text>已成为团长</text>
					</view>
					<image src="../../static/mine/back.png" mode="" class="back"></image>
				</view>
			</view>
			<view class="mine_pay_active">
				<view class="mine_pay_active_list">
					<view class="mine_pay_active_list_top">
						<view class="mine_pay_active_list_top_left" @click="gotoActivitiesParticipated">
							<text class="t1">{{myOrderNum}}</text> <text class="t2">我参与的活动</text>
						</view>
						<view class="mine_pay_active_list_top_right" @click="gotoInitiatedActivities">
							<view class="">
								<text class="t1">{{myActNum}}</text><text class="t3">我是团长</text>
							</view> <text class="t2">我发起的活动</text>
						</view>
					</view>
					<view class="mine_pay_active_list_bottom" @click="gotoAccount">
						<text class="num">{{validAmount}}</text> <text class="text1">我的账户</text>
					</view>
				</view>
				<view class="Common_functions">
					<view class="Common_functions_title">
						常用功能
					</view>
					<view class="Common_functions_container">
						<view class="Common_functions_item Common_functions_item1" @click="test">
							<image src="../../static/mine/font.png" mode=""></image>
							<text>字体修改</text>
						</view>
						<view class="Common_functions_item Common_functions_item1">
							<image src="../../static/mine/heart.png" mode=""></image>
							<text>新手帮助</text>
						</view>
						<view class="Common_functions_item Common_functions_item1">
							<image src="../../static/mine/book.png" mode=""></image>
							<text>用户协议</text>
						</view>
						<view class="Common_functions_item Common_functions_item1">
							<image src="../../static/mine/set.png" mode=""></image>
							<text>系统设置</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WebAPI from "../../api"
	import {
		getUserInfo,
		applyingTeamLeader,
		joinActiveNum,
		userAccountBalance
	} from "../../api/request.js"
	import {
		gotoLogin
	} from "../../utils/getPhone.js"
	export default {
		data() {
			return {
				userInfo: {
					nickName: "",
					avatarUrl: "",
					phone: ""
				},
				isLogin: false,
				joinActiveNumData: 0,
				myOrderNum: 0,
				myActNum: 0,
				validAmount: 0,
				freezeAmount: 0,
				showApplyingTeamLeader: false
			};
		},
		onShow() {
			this.getData()
			const that = this
			uni.getStorage({
				key: "hasPhone",
				success(res) {
					if (res.data) {
						that.gotoUserInfo()
						let routes = getCurrentPages();
						// let curRoute = routes[routes.length - 1].route
						console.log(routes, 'let curRoute = routes[routes.length - 1].route');
					}
				}
			})
			uni.showTabBar()
		},
		onLoad() {
			const that = this
			uni.getStorage({
				key: "hasPhone",
				success(res) {
					console.log(res, 'hasPhone');
					if (res.data == false) {
						let data = gotoLogin()
					}
					that.isLogin = true
				},
				fail(err) {
					console.log(err, 'hasPhone');
					let data = gotoLogin()
					that.isLogin = false
				}
			})
		},
		methods: {
			async getData() {
				let result = await userAccountBalance()
				this.validAmount = result.validAmount
				this.freezeAmount = result.freezeAmount
				this.showApplyingTeamLeader = result.isRegimental
				console.log(result, 'result');
			},
			onGetPhoneNumber(e) {
				const that = this
				uni.getStorage({
					key: "token",
					success(res) {
						uni.request({
							url: WebAPI.getUserPhone,
							method: 'POST',
							data: {
								wxCode: e.detail.code,
							},
							header: {
								Authorization: "Bearer:" + res.data // 修改这里的连接方式
							},
							success: (res) => {
								console.log(res);
								that.isLogin = true
								uni.setStorage({
									key: "token",
									data: res.data.data.token
								})
								uni.setStorage({
									key: "hasPhone",
									data: res.data.data.hasPhone
								})
							},
						});
					}
				})
			},
			test() {
				uni.getUserProfile({ //获取到用户信息
					desc: '登录后可同步数据',
					success: async (obj) => {
						console.log('obj', obj);
						that.nickName = obj.userInfo.nickName //用户名
						that.avatarUrl = obj.userInfo.avatarUrl //用户头像

						// 调用 action ，请求登录接口
						uni.login({
							provider: 'weixin',
							success: (res) => {
								console.log('res-login', res);
								//获取到code
								that.code = res.code;
								console.log('code', res.code);

							},
						});
					},
					fail: (e) => {
						console.log(e, '授权已取消');
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},
			async applyingTeamLeaderMethod() {
				let res = await applyingTeamLeader()

				uni.showToast({
					icon: "none",
					title: "申请成为团长成功！"
				})
			},
			async joinActiveNumMethod() {
				let res = await joinActiveNum()
				console.log(res);
				this.joinActiveNumData = res
			},
			gotoUserInfoPage() {
				uni.navigateTo({
					url: "/pages/userInfo/userInfo"
				})
			},
			gotoInitiatedActivities() {
				uni.navigateTo({
					url: "/subPackage/InitiatedActivities/InitiatedActivities"
				})
			},
			async gotoUserInfo() {
				const that = this
				uni.getStorage({
					key: 'token',
					success: async res => {
						console.log(this, 'getUserInfo', this.userInfo);
						let result = await getUserInfo(res.data)
						console.log(result, 'result');
						this.userInfo.nickName = result.nickName || '用户'
						this.userInfo.avatarUrl = result.avatarUrl || 'https://cdn.seovx.com/?mom=302'
						this.userInfo.phone = result.phone || '暂未上传手机号'
						this.myActNum = result.myActNum || '0'
						this.myOrderNum = result.myOrderNum || '0'
						console.log(result, 'result');
					},
					fail: async res => {}
				});
				// uni.navigateTo({
				// 	url: "/pages/userInfo/userInfo"
				// })
				console.log(WebAPI, this);

			},
			gotoAccount() {
				uni.navigateTo({
					url: "/pages/account/account"
				})
			},
			gotoActivitiesParticipated() {
				uni.navigateTo({
					url: "/pages/activitiesParticipated/activitiesParticipated"
				})
			}
		}
	}
</script>

<style lang="scss">
	.mine_box {
		background-image: url('');
		// background-image: url("../../static/bgmine@2x.png");
		background-size: 100%;
		min-height: 100vh;
		width: 100vw;
		padding: 0;
		margin: auto;
	}

	.mine_container {
		width: 90%;
		margin: auto;

		.mine_userInfo {
			// margin-top: 226rpx;
			display: flex;

			.mine_userInfo_left {
				width: 112rpx;
				height: 112rpx;
				border: 8rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 32rpx;
				overflow: hidden;

				image {
					width: 112rpx;
					height: 112rpx;
				}

			}

			.mine_userInfo_right {
				display: flex;
				flex-direction: column;
				margin-left: 38rpx;

				.mine_userInfo_right_top {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 44rpx;
					color: #000000;
					line-height: 60rpx;
					text-align: left;
					font-style: normal;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400rpx;
				}

				.mine_userInfo_right_bottom {
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}


	}

	.mine_pay {
		width: 100vw;
		height: 80vh;
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: 196rpx;
		background: white;
		padding: 40rpx 0;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		position: relative;

		.mine_pay_box {
			background-image: url('../../static/mine/bigBg.png');
			width: 100vw;
			background-repeat: no-repeat;
			background-size: 100%;
			height: 100rpx;
			margin-bottom: 40rpx;
			position: absolute;
			top: -100rpx;

			.mine_pay_apply {
				margin-left: 84rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 76rpx;

				.mine_pay_apply_left {
					margin-top: 34rpx;
					display: flex;

					.user {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						margin-left: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;

					}
				}


				.back {
					margin-top: 34rpx;
					width: 20rpx;
					height: 28rpx;
					margin-right: 68rpx;
				}
			}

		}


	}

	.mine_pay_active {
		margin-top: 152rpx;
		width: 90%;
		margin: auto;

		.mine_pay_active_list {
			display: flex;
			flex-direction: column;

			.mine_pay_active_list_top {
				display: flex;

				.mine_pay_active_list_top_left {
					width: 324rpx;
					height: 164rpx;
					background: url("../../static/mine/species.png") no-repeat;
					background-size: 100%;
					margin-right: 22rpx;
					display: flex;
					flex-direction: column;
				}

				.mine_pay_active_list_top_right {
					width: 324rpx;
					height: 164rpx;
					background: url("../../static/mine/species2.png") no-repeat;
					background-size: 100%;
					display: flex;
					flex-direction: column;

					>view {
						// margin-left: 34rpx;
						margin-top: 34rpx;
					}
				}
			}

			.mine_pay_active_list_bottom {
				margin-top: 20rpx;
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;
				width: 670rpx;
				height: 164rpx;
				background-image: url("../../static/mine/bg.png");
				background-repeat: no-repeat;
				background-size: 100%;


				.num {
					width: 170rpx;
					height: 56rpx;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 28rpx;
					color: #FA301B;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					margin-top: 30rpx;
					margin-left: 30rpx;
				}

				.text1 {
					width: 112rpx;
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D1D1D;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					margin-left: 30rpx;
				}
			}
		}
	}

	.Common_functions {
		.Common_functions_title {
			width: 128rpx;
			height: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1A0200;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		.Common_functions_container {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			padding-left: 20rpx;

			.Common_functions_item {
				display: flex;
				flex-direction: column;
			}

			.Common_functions_item image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	.t1 {
		width: 54rpx;
		height: 64rpx;
		font-family: DINAlternate, DINAlternate;
		font-weight: bold;
		font-size: 56rpx;
		color: #FFA927;
		line-height: 64rpx;
		text-align: left;
		font-style: normal;
		margin-left: 34rpx;
		margin-top: 34rpx;
	}

	.t2 {
		width: 168rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1D1D1D;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-left: 32rpx;
		margin-top: 6rpx;
	}

	.t3 {
		width: 88rpx;
		height: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFA927;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
</style>